<template>
  <div>
    <audio ref="audio"  @timeupdate="updateTime" :src="`https://music.163.com/song/media/outer/url?id=${id}.mp3`">
    </audio>
  </div>
</template>

<script>
import { mapMutations, mapState } from 'vuex'
export default {
  props: ['id'],
  watch: {


  },
  computed: {
    ...mapState(['playList', 'playListIndex', 'isBtnShow', 'detailShow', 'currentTime','audio', 'isPlaying']),
  },

  created() {
    this.$store.commit('setAudio', this.$refs.audio)
  },
  updated() {
    this.$refs.audio.currentTime
    this.$store.commit('setAudio', this.$refs.audio)
  },

  methods: {
    addDuration(){
   this.updateDuration(this.$refs.audio.duration);
      localStorage.setItem('duration', JSON.stringify(this.$refs.audio.duration));
    },
    addCurrent(){
      this.updateCurrentTime(this.$refs.audio.currentTime);
      localStorage.setItem('currentTime', JSON.stringify(this.$refs.audio.currentTime));
    },
    changePlay() {
      console.log('123', this.$refs.audio);
      this.setAudio(this.$refs.audio);
      if (this.$refs.audio.paused) {

        this.play();
        this.updateIsbtnShow(false);
        this.updateTime();
      } else {
        this.pause();
        this.updateIsbtnShow(true);
      }
    },


    updateTime() {
      this.updateCurrentTime(this.$refs.audio.currentTime)
      // console.log(this.$refs.audio.currentTime);

    },
    ...mapMutations(['updatePlayList', 'updatePlayListIndex', 'updateDetailShow', 'updateIsbtnShow', 'updateCurrentTime','setAudio','play','pause','updateDuration']),
  }
}
</script>